<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryRef" :model="queryParams" :inline="true">
      <el-form-item label="表名" prop="tableName">
        <el-input
          v-model="queryParams.tableName"
          placeholder="请输入表名"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表单名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入表单名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表单描述" prop="tableRemark">
        <el-input
          v-model="queryParams.tableRemark"
          placeholder="请输入表单描述"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="flex flex-row flex-wrap items-center mb-2">
      <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      <el-button type="primary" plain icon="Edit" :disabled="single" @click="handleUpdate({})">
        修改
      </el-button>
      <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete({})">
        删除
      </el-button>
      <el-button type="info" plain icon="Upload" @click="handleUpload">导入</el-button>
      <right-toolbar v-model:showSearch="showSearch" @query-table="getList" />
    </div>

    <el-table v-loading="loading" :data="list" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column label="表名" align="center" prop="tableName" />
      <el-table-column label="表单名称" align="center" prop="name" />
      <el-table-column label="表单描述" align="center" prop="tableRemark" />
      <el-table-column label="修改时间" align="center">
        <template #default="{ row }">
          <span>{{ row.updateTime || row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230">
        <template #default="{ row }">
          <div class="flex flex-row justify-center items-center">
            <el-button link icon="Edit" @click="handleUpdate(row)">修改</el-button>
            <el-button link icon="Operation" @click="handleTestClick(row)"> 数据录入</el-button>
            <el-dropdown :hide-on-click="false">
              <span class="el-dropdown-link">
                更多
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <el-button link icon="Delete" style="color: red" @click="handleDelete(row)">
                      删除
                    </el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button link icon="Cpu" @click="handlePermClick(row)">菜单配置</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button link icon="Refresh" @click="handleSyncTable(row)">
                      同步数据库
                    </el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-show="total > 0"
      v-model:current-page="pageParams.pageNum"
      v-model:page-size="pageParams.pageSize"
      class="flex justify-end mt-4"
      :page-sizes="[10, 20, 50, 100, 200]"
      :small="false"
      :disabled="false"
      :background="true"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleQuery"
      @current-change="getList"
    />

    <detail-form
      v-model="detailShow"
      :detail-id="detailId"
      :data-source-id-options="dataSourceIdOptions"
      @success="getList"
    />

    <import-table
      v-model="importTableShow"
      :data-source-id-options="dataSourceIdOptions"
      @success="getList"
    />

    <config-perm v-model="permShow" :perm-id="permId" :table-code="tableCode" />

    <sync-table v-model="syncShow" :table-id="syncId" />
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { delTable, listTable } from '@/api/web/bu/form';
  import { useDataSourceIdOptions } from './useConstant';
  import modal from '@/plugins/modal';
  import detailForm from './detailForm';
  import importTable from './importTable';
  import configPerm from './configPerm';
  import syncTable from './syncTable';

  const router = useRouter();

  const { dataSourceIdOptions } = useDataSourceIdOptions();

  const queryRef = ref(null);
  const pageParams = ref({
    pageNum: 1,
    pageSize: 10,
  });
  const queryParams = ref({
    name: null,
    tableName: null,
    tableRemark: null,
  });
  const list = ref([]);
  const loading = ref(false);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);

  const detailShow = ref(false);
  const detailId = ref(null);
  const syncShow = ref(false);
  const syncId = ref(null);
  const importTableShow = ref(false);
  const permShow = ref(false);
  const permId = ref(null);
  const tableCode = ref(null);

  function getList() {
    loading.value = true;
    listTable(pageParams.value, queryParams.value)
      .then((res) => {
        list.value = res?.data?.records ?? [];
        total.value = res?.data?.total ?? 0;
      })
      .finally(() => {
        loading.value = false;
      });
  }

  function handleQuery() {
    pageParams.value.pageNum = 1;
    getList();
  }

  function resetQuery() {
    queryRef.value?.resetFields();
    handleQuery();
  }

  function handleSelectionChange(selection) {
    ids.value = selection.map((item) => item.id);
    single.value = selection.length !== 1;
    multiple.value = !selection.length;
  }

  function handleAdd() {
    detailId.value = '';
    detailShow.value = true;
  }

  function handleUpdate(row) {
    detailId.value = row?.id ?? ids.value?.[0];
    detailShow.value = true;
  }

  function handleDelete(row) {
    const _id = row?.id ? [row.id] : ids.value;
    modal
      .confirm('是否确认删除此数据项？')
      .then(function () {
        return delTable(_id);
      })
      .then(() => {
        getList();
        modal.msgSuccess('删除成功');
      })
      .catch(() => {});
  }

  function handleUpload() {
    importTableShow.value = true;
  }

  function handlePermClick(row) {
    permId.value = row.id;
    tableCode.value = row.tableCode;
    permShow.value = true;
  }

  function handleSyncTable(row) {
    syncId.value = row.id;
    syncShow.value = true;
  }

  function handleTestClick(row) {
    router.push({ name: 'Curd', query: { id: row.id, tableCode: row.tableCode } });
  }

  getList();
</script>
